﻿@using System.Diagnostics

@{
  Layout = "_Layout";
  var version =
  FileVersionInfo.GetVersionInfo(typeof(IdentityServer4.Hosting.IdentityServerMiddleware).Assembly.Location).ProductVersion.Split('+').First();
}

@*<div class="welcome-page">
  <h1>
  <img src="~/icon.jpg">
  Welcome to IdentityServer4
  <small class="text-muted">(version @version)</small>
  </h1>

  <ul>
  <li>
  IdentityServer publishes a
  <a href="~/.well-known/openid-configuration">discovery document</a>
  where you can find metadata and links to all the endpoints, key material, etc.
  </li>
  <li>
  Click <a href="~/diagnostics">here</a> to see the claims for your current session.
  </li>
  <li>
  Click <a href="~/grants">here</a> to manage your stored grants.
  </li>
  <li>
  Here are links to the
  <a href="https://github.com/identityserver/IdentityServer4">source code repository</a>,
  and <a href="https://github.com/IdentityServer/IdentityServer4/tree/main/samples">ready to use samples</a>.
  </li>
  </ul>
  </div>*@

<div id="dashboard">
  <el-card class="box-card" shadow="hover" v-on:click.native.native="openUrl('user')">
    <i class="el-icon-user"></i>
    <h1>个人中心</h1>
  </el-card>
  <el-card class="box-card" shadow="hover" v-on:click.native="openUrl('diagnostics')">
    <i class="el-icon-chat-dot-round"></i>
    <h1>会话</h1>
  </el-card>
  <el-card class="box-card" shadow="hover" v-on:click.native="openUrl('client?pageindex=1')">
    <i class="el-icon-monitor"></i>
    <h1>客户端</h1>
  </el-card>
  <el-card class="box-card" shadow="hover" v-on:click.native="openUrl('api?pageindex=1')">
    <i class="el-icon-link"></i>
    <h1>API</h1>
  </el-card>

  <el-card class="box-card" shadow="hover" v-on:click.native="openUrl('user/changepassword')">
    <i class="el-icon-key"></i>
    <h1>修改密码</h1>
  </el-card>
  <el-card class="box-card logout" shadow="hover" v-on:click.native="openUrl('account/logout')">
    <i class="el-icon-switch-button"></i>
    <h1>登出</h1>
  </el-card>

</div>

@section scripts
{
<script>
  var dashboard = new Vue({
    el: '#dashboard',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      openUrl(url) {
        console.log(url)
        window.location.href = url;
      }
    }
  })
</script>
}
@section styles{
<style>
  #dashboard {
    flex-wrap: wrap;
    display: flex;
    width: 950px;
  }

  .logout {
    color: white;
    background-color: red !important;
    border: 0;
  }

  .logout:hover {
    background-color: darkred !important
  }

  .box-card {
    height: 200px;
    width: 200px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    margin: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .box-card:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
  }

  .box-card i {
    font-size: 50px;
  }

  .el-card__body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
  }

  #dashboard h1 {
    margin: 20px 0 0 0;

  }
</style>

}
